<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能排课系统 - 登录</title>
    <!-- 使用与主系统相同的样式库 -->
    <script src="3.4.16"></script>
    <link href="font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 主色调-蓝色，代表教育与信任
                        secondary: '#10B981', // 辅助色-绿色，代表成长与活力
                        accent: '#F59E0B', // 强调色-橙色，用于重要操作
                        neutral: {
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            300: '#D1D5DB',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    }
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-height {
                transition: max-height 0.3s ease-in-out;
            }
            .table-cell-hover {
                @apply transition-all duration-200;
            }
            .subject-card {
                @apply bg-white rounded-lg shadow-card p-4 mb-3 cursor-move transition-all duration-300 hover:shadow-hover hover:-translate-y-1;
            }
            .timetable-cell {
                @apply border border-neutral-200 min-h-[100px] p-2 relative bg-white transition-all duration-200;
            }
            .timetable-cell-empty {
                @apply bg-neutral-50 hover:bg-neutral-100 cursor-pointer;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
            }
            .btn-secondary {
                @apply bg-white border border-neutral-300 text-neutral-700 font-medium py-2 px-4 rounded-lg transition-all duration-200 hover:bg-neutral-50;
            }
            .btn-accent {
                @apply bg-accent hover:bg-accent/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
            }
            .form-input {
                @apply w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .form-select {
                @apply w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 appearance-none bg-white;
            }
            .sidebar-item {
                @apply flex items-center px-4 py-3 text-neutral-600 hover:bg-primary/5 hover:text-primary rounded-lg transition-all duration-200;
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary font-medium;
            }
        }
    </style>
</head>

<body class="bg-gray-100">
    <div class="min-h-screen flex items-center justify-center">
        <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
            <h1 class="text-2xl font-bold text-center mb-6">智能排课系统</h1>
            <form id="loginForm">
                <div class="mb-4">
                    <label class="block text-gray-700 mb-2" for="username">用户名</label>
                    <input type="text" id="username" class="w-full px-3 py-2 border rounded-md" required>
                </div>
                <div class="mb-6">
                    <label class="block text-gray-700 mb-2" for="password">密码</label>
                    <input type="password" id="password" class="w-full px-3 py-2 border rounded-md" required>
                </div>
                <button type="submit"
                    class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition">
                    登录
                </button>
            </form>
        </div>
    </div>

    <script>
        // 检查是否已登录，如果已登录则直接跳转
        const token = localStorage.getItem('token');
        if (token) {
            // 使用replace而不是href，避免历史记录问题
            window.location.replace('dashboard.html');
        }

        document.getElementById('loginForm').addEventListener('submit', async function (e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }

            try {
                const response = await fetch('https://api.kljmgzs.cn:8180/api/user/login', {
                    method: 'POST',
                    mode: 'cors',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                        'Origin': window.location.origin
                    },
                    body: JSON.stringify({
                        account: username,
                        password: password
                    })
                });

                const data = await response.json();

                if (response.ok) {
                    // 存储token
                    localStorage.setItem('token', data.token);
                    // 直接跳转，不需要设置isLoggedIn
                    window.location.replace('dashboard.html');
                } else {
                    alert(data.message || '登录失败');
                }
            } catch (error) {
                console.error('登录错误:', error);
                alert('网络错误，请稍后重试');
            }
        });
    </script>
</body>

</html>